<template>
    <div class="app_main" :class="curentTab=='2'?'map-left-postion':''" id="app_main" style="overflow: hidden">
      <div>
        <ComHeaderNav 
            @updateClickItems="updateClickItems" 
            :tabId="curentTab"
            showType="tms"
            :list="[{
                name: '整体统计',
                value: 0
              }, {
                name: '趋势分析',
                value: 1
              }, {
                name: '地域分布',
                value: 2
              }, {
                name: '厂商分布',
                value: 3
              }, {
                name: '终端类型',
                value: 4
              }]"/>
      </div>
      <!-- 整体统计 -->
      <div v-if="curentTab === 0">
        <firstPage/>
      </div>
      <!-- 趋势分析 -->
      <div v-if="curentTab === 1">
        <secondPage/>
      </div>
      <!-- 地域分布 -->
      <div v-if="curentTab === 2">
        <thirdPage/>
      </div>
      <!-- 厂商分布 -->
      <div v-if="curentTab === 3">
        <fourthPage/>
      </div>
      <!-- 终端类型 -->
      <div v-if="curentTab === 4">
        <fifthPage/>
      </div>
    </div>
</template>
<script setup>
  import { onBeforeMount, ref } from 'vue'
  import ComHeaderNav from '@/components/public/ComHeaderNavNew.vue';
  import firstPage from '../firstPage/indexView.vue';
  import secondPage from '../secondPage/indexView.vue';
  import thirdPage from '../thirdPage/indexView.vue';
  import fourthPage from '../fourthPage/indexView.vue';
  import fifthPage from '../fifthPage/indexView.vue';
  onBeforeMount(() => {
    // console.log('onBeforeMount');
  });
  const curentTab = ref(0);
  //切换页签
  const updateClickItems = (data) => {
    curentTab.value = data;
  }
</script>

<style lang="scss" scoped>
.cursor {
  cursor: pointer;
}
.app_main {
  width: 100%;
  min-height: 100%;
  background: #060d32;
}
</style>